import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
import { Carousel, WingBlank, Toast, Modal, Icon } from 'antd-mobile';
import assets from 'assets'
import mall, { ProductDetailVO, ProductAttributeValueVO, ProductVideo } from 'api/mall'
import '../../styles/swiper.min.css'
import Swiper from 'react-id-swiper';
import { CSSTransition } from 'react-transition-group'  // 引入动画库
import './good.css'
import { getDate } from 'utils/dateUtils';

interface GoodSharePageProps {
    kid?: number
}
export enum AttributeType {
    Spec = 0,    // 规格属性
    Service = 1, // 服务说明
    Params = 2,  // 商品参数
    Adapt = 3,   // 适宜人群
    Taboo = 4,   // 禁忌人群
}
// 认证类别 0 无公害 1 绿色 2 有机 3地理 4 其他 5 无
const certLogos: { [key: number]: string } = {
    0: assets.goods.harmless_logo,
    1: assets.goods.green_logo,
    2: assets.goods.organic_logo,
    3: assets.goods.geography_logo,
    4: assets.goods.others_logo,
    5: assets.goods.others_logo,
    19: assets.goods.inspection_logo,
    20: assets.goods.trademark_logo,
}
const Preview: PageComponent = props => {
    const [goodData, setGoodData] = useState({} as ProductDetailVO)
    const [productVideo, setProductVideo] = useState({} as ProductVideo)   //  产品视频数据
    const [shop, setShop] = useState()
    const [evaluate, setEvaluate] = useState()              //   评价数据
    const [certs, setCerts] = useState([])
    const [evaluatePics, setEvaluatePics] = useState([])    //   第一条评价图片的列表
    const [showBanner, setShowBanner] = useState(false);                  // 是否展示烹饪详情数据
    const [bannerlist, setBannerlist] = useState([]);                     // 商品详情顶部轮播滚动数据
    const [detailHtml, setDetailHtml] = useState([])        //   正文部分
    const [currentSlideIndex, setCurrentSlideIndex] = useState(0)          // currentSlideIndex
    const [showVideo, setShowVideo] = useState(false)
    useEffect(() => {
        if (bannerlist.length > 0) {
            setShowBanner(true)
        }
        // console.log('轮播数据 - - :',bannerlist)
    }, [bannerlist]);

    /**
       * 获取安选标准图片相对父元素的位置
       */
    let [certlayoutArr, setCertlayoutArr] = useState([])
    const getCertLayout = (item: any) => {
        setCertlayoutArr(certlayoutArr.concat(item))
    }
    /**
    *  打开-关闭弹窗
    */
    const [appropriateUserShow, setAppropriateUserShow] = useState(false)          // 适宜人群
    const closeAppropriatePop = () => {
        setAppropriateUserShow(false)
    }
    const openAppropriatePop = () => {
        setAppropriateUserShow(true)
    }

    const [tabooShow, setTabooShow] = useState(false)                             // 禁忌人群
    const closeTabooPop = () => {
        setTabooShow(false)
    }
    const openTabooPop = () => {
        setTabooShow(true)
    }

    const [productParamShow, setProductParamShow] = useState(false)           // 商品参数
    const closeParamPop = () => {
        setProductParamShow(false)
    }
    const openParamPop = () => {
        setProductParamShow(true)
    }

    const [productStandardsShow, setProductStandardsShow] = useState(false)   // 产品规格属性
    const closeStandardsPop = () => {
        setProductStandardsShow(false)
    }
    const openStandardsPop = () => {
        setProductStandardsShow(true)
    }
    const [serviceShow, setServiceShow] = useState(false)                     // 服务说明
    const closeServicePop = () => {
        setServiceShow(false)
    }
    const openServicePop = () => {
        setServiceShow(true)
    }
    const [adaptShow, setAdaptShow] = useState(false)                     // 服务说明
    const closeAdaptPop = () => {
        setAdaptShow(false)
    }
    const openAdaptPop = () => {
        setAdaptShow(true)
    }
    /**
     * 处理attributeType 数据
     */
    const [attributeSpec, setAttributeSpec] = useState([])             // Spec = 0,    // 规格属性
    const [attributeService, setAttributeService] = useState([])       // Service = 1, // 服务说明
    const [attributeParams, setAttributeParams] = useState([])         // Params = 2,  // 商品参数
    const disposeAttributeData = (attributes: ProductAttributeValueVO[]) => {

        let Spec = attributes.filter(item => item.attributeType === 0)
        setAttributeSpec(Spec)

        let Service = attributes.filter(item => item.attributeType === 1)
        setAttributeService(Service)

        let Params = attributes.filter(item => item.attributeType === 2)
        console.log(Params)
        setAttributeParams(Params)

    }

    /**
     * 商品数量的加减
     */
    const [productNumber, setProductNumber] = useState(1)
    const addProduct = () => {
        if (productNumber < 99) {
            setProductNumber(productNumber + 1)
        }
    }
    const delProduct = () => {
        if (productNumber > 1) {
            setProductNumber(productNumber - 1)
        }
    }

    /**
    *  顶部视频图片切换
    *  @param {number} type
    */
    const [showProductState, setShowProductState] = useState(1)
    const tipparams = {
        // direction: 'horizontal',
        slidesPerdiv: 3.8,
        spaceBetween: 20,
        freeMode: true
        // activeSlideKey:cur
    }
    const lenceparams = {
        // direction: 'horizontal',
        slidesPerdiv: 1.8,
        spaceBetween: 20,
        freeMode: true
    }
    useEffect(() => {
        setShowBanner(false)
        if (showProductState == 1) {
            setCurrentSlideIndex(0)
            setShowBanner(true)
        } else {
            setCurrentSlideIndex(1)
            setShowBanner(true)
        }
    }, [showProductState]);
    useEffect(() => {
        if (true) {
            // 获取商品基本信息
            mall.products.get({ kid: props.match.params.kid }).then(res => {
                if (!res) {
                    Toast.fail('商品不存在!', 1);
                    return
                }
                console.log(res)
                setGoodData(res)
                if (res.attributes && res.attributes.length > 0) {
                    disposeAttributeData(res.attributes)
                }
                const { productName, mainPic } = res
                if (res.productVideo && res.productVideo.video && res.productVideo.video.length > 0) {
                    setProductVideo(res.productVideo)
                    setShowVideo(true)
                }

                if (res.evaluate && res.evaluate.pics) {            //  商品评价图片
                    setEvaluatePics(res.evaluate.pics.split(','))
                }
                if (res.detailShowPic) {                //  商品轮播数据
                    var arr = []
                    if (res.productVideo.video && res.productVideo.video.length > 0) {
                        arr = [res.productVideo, ...res.detailShowPic.split(',')]
                    } else {
                        arr = [...res.detailShowPic.split(',')]
                    }
                    // console.log('轮播图 数据 - - : ', arr)
                    setBannerlist(arr)
                }
                if (res.certs) {
                    setCerts(res.certs)
                }
                if (res.detailHtml) {
                    const detailHtmlData = JSON.parse(res.detailHtml)
                    setDetailHtml(detailHtmlData)
                }
                if (res.evaluate) {
                    setEvaluate(res.evaluate)
                }
                if (res.shop) {
                    setShop(res.shop)
                }
                // 获取食材  获取烹饪列表
                if (res.productFoodId) {
                    // console.log('res - - * * * * * * - - :',res.productFoodId)
                    // getNewsCookieDataList(parseInt(res.productFoodId))   //   获取食材,获取烹饪列表,资讯
                }
                if (res.evaluate) {
                    setEvaluate(res.evaluate)
                }
                if (res.shop) {
                    setShop(res.shop)
                }
            }
            )
        }
    }, [])
    const clickHandle = () => {
        console.log(11)
    }
    const validAllAuth = useMemo(() => {
        let productAuth: string[] = [];
        let shopAuth = goodData.shop ? goodData.shop.auths : [];
        goodData.certs && goodData.certs.forEach((pCert) => {
            if (!pCert || !pCert.certPic) return
            productAuth = productAuth.concat(pCert.certPic)
        })
        let finalAuth = [...productAuth, ...shopAuth];

        return finalAuth.filter(auth => !!auth)
    }, [goodData])
    return (
        <div className='good-wrap' style={{ paddingTop: 0 }}>
            <div className='swiper-cont'>
                <div className='top-video-swiper'>
                    {
                        !showBanner ? '' :
                            <div className='topSwiper'>
                                <WingBlank>
                                    <Carousel
                                        // autoplay={true}
                                        // infinite
                                        dots={false}
                                        selectedIndex={currentSlideIndex}
                                        // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                                        afterChange={index => {
                                            // if (showProductState == 1) {
                                            //     setCurrentSlideIndex(0)
                                            // }

                                            setCurrentSlideIndex(index)
                                        }}
                                    >
                                        {bannerlist.map((val: any, index: number) => (
                                            <a
                                                key={index}
                                                href=""
                                                style={{ touchAction: 'none', display: 'inline-block', width: '100%', height: 620 }}>
                                                {
                                                    val.video ? <video poster={val && val.coverImgUrl} controls className="video-play" src={val.video}></video>
                                                        :
                                                        <img
                                                            src={val}
                                                            alt=""
                                                            style={{ width: '100%', display: 'inline-block', height: '100%', verticalAlign: 'top' }}
                                                        // onLoad={() => {
                                                        //     // fire window resize event to change height
                                                        //     window.dispatchEvent(new Event('resize'));
                                                        //     // this.setState({ imgHeight: 'auto' });
                                                        // }}
                                                        />
                                                }
                                            </a>
                                        ))}
                                    </Carousel>
                                </WingBlank>


                                {!showVideo || currentSlideIndex != 0 ?
                                    <div className='collect'>
                                        {
                                            !showVideo ?
                                                <span className='collect-number'>{currentSlideIndex + 1 || 0}/{bannerlist.length || 0}</span> :
                                                <span className='collect-number'>{currentSlideIndex || 0}/{bannerlist.length - 1 || 0}</span>
                                        }

                                    </div>
                                    : ''}
                            </div>
                    }
                    {showVideo && productVideo ?
                        <div className='check-show-state'>
                            <span className={showProductState == 1 ? 'item active' : 'item '} onClick={() => setShowProductState(1)}>
                                {showProductState == 1 ?
                                    <img className='item-img' src={require('../../assets/image/goods/play-icon-cur.png')} alt='' />
                                    : <img className='item-img' src={require('../../assets/image/goods/play-icon-pause.png')} alt='' />
                                }
                                视频
                </span>
                            <span className={showProductState == 2 ? 'item active' : 'item '} onClick={() => setShowProductState(2)}>图片</span>
                        </div>
                        : ''}
                </div>
                {!(goodData && goodData.salePrice) ? '' :
                    <div className='price-cont'>
                        {goodData.productPrepareSimpleAppVO ? <div className='preSaleLabel'>预购价</div> : null}
                        <div className='newprice'><div className='yang'>¥</div><div className='pricenumber'>{goodData && parseInt((goodData.salePrice / 100).toFixed(2))}.</div><div className='dots'>{goodData && (goodData.salePrice / 100).toFixed(2).split('.')[1]}</div></div>
                        <div className='oldprice'>¥{goodData && (goodData.originalPrice / 100).toFixed(2)}</div>
                    </div>
                }
                {goodData.productPrepareSimpleAppVO && goodData.productPrepareSimpleAppVO.preSaleStartTime ? <div className='preSaleTime'>预购起始时间：{getDate(goodData.productPrepareSimpleAppVO.preSaleStartTime)}至{getDate(goodData.productPrepareSimpleAppVO.preSaleEndTime)}</div> : null}
                <div className='product-name'>{goodData && goodData.productName}</div>
            </div>
            {/* {goodData && goodData.certs && goodData.certs.length > 0 ?
                <div>
                    <div className='safe-top-cont'>
                        <img className='safe-top-icon-' src={require('../../assets/image/goods/safe.png')} alt='' />
                        <div className='txt'>质量保障</div>
                    </div>
                </div>
                : ''} */}
            <div className='product-Information'>
                {goodData && goodData.productPrepareSimpleAppVO ?
                    <div className='infor-line'>
                        <div className='line-tip'>发货时间</div>

                        <div className='first-line'>
                            {goodData.productPrepareSimpleAppVO && [1, 2, 3].includes(goodData.productPrepareSimpleAppVO.state) && goodData.productPrepareSimpleAppVO.deliveryStartTime ? (
                                <div className='summaryFirstLine'>
                                    预计{getDate(goodData.productPrepareSimpleAppVO.deliveryStartTime)}日开始发货
				</div>
                            ) : null}
                        </div>
                    </div> : null}
                {
                    goodData && goodData.address ?
                        <div className='infor-line'>
                            <div className='line-tip'>发货</div>
                            <div className='first-line'>
                                <div className='line-right-cont' style={{ width: '100%' }}>
                                    <div className='r-txt'>
                                        {/*+ goodData.address[0].addrDetail*/}
                                        <span className='local-t' >{goodData && goodData.address && goodData.address[0] && (goodData.address[0].provinceName + goodData.address[0].cityName)}</span>
                                        <span className='ship-fee'>快递：¥{goodData && goodData.freightFee ? (goodData.freightFee / 100).toFixed(2) : 0}</span>
                                    </div>
                                    <div className='r-arrow'></div>
                                </div>
                            </div>
                        </div>
                        : ''}

                {attributeService && attributeService.length > 0 ?
                    <div className='infor-line' onClick={openServicePop}>
                        <div className='line-tip'>服务说明</div>
                        <div className='line-right-cont'>
                            <div className='r-txt'>
                                {
                                    attributeService.slice(0, 2).map((item, index) => (
                                        <span className='icon-txt' key={item.attributeName}>
                                            <img className='r-txt-icon' src={require('../../assets/image/goods/Shapecopy@2x.png')} alt='' /><span>{item.attributeName}</span>
                                        </span>
                                    ))
                                }
                                {/*<img className='r-txt-icon' src={require('../../assets/image/goods/Shapecopy@2x.png')} alt=''/><span>48小时快速退款</span>*/}
                            </div>
                            <div className='r-arrow'><Icon type='right' size='lg' color='#CACACE' /></div>
                        </div>
                    </div>
                    : ''}

                {attributeParams && attributeParams.length > 0 ?
                    <div className='infor-line' onClick={openParamPop}>
                        <div className='line-tip'>商品参数</div>
                        <div className='line-right-cont'>
                            <div className='r-txt'>
                                {
                                    attributeParams.slice(0, 3).map((item, index) => (
                                        <span key={index} className='param-tip'>{item.attributeName} </span>
                                    ))
                                }
                            </div>
                            <div className='r-arrow'><Icon type='right' size='lg' color='#CACACE' /></div>
                        </div>
                    </div>
                    : ''}
                {attributeSpec && attributeSpec.length > 0 ?
                    <div className='infor-line' >
                        <div className='line-tip'>选择规格</div>
                        <div className='line-right-cont'>
                            <div className='r-txt'></div>
                        </div>
                    </div>
                    : ''}
                {goodData.suit ?
                    <div className='infor-line' onClick={openAdaptPop}>
                        <div className='line-tip'>适宜人群</div>
                        <div className='line-right-cont'>
                            <div className='r-txt'></div>
                            <div className='r-arrow'><Icon type='right' size='lg' color='#CACACE' /></div>
                        </div>
                    </div>
                    : ''}
                {goodData.noSuit ?
                    <div className='infor-line' onClick={openTabooPop}>
                        <div className='line-tip'>禁忌人群</div>
                        <div className='line-right-cont'>
                            <div className='r-txt'></div>
                            <div className='r-arrow'><Icon type='right' size='lg' color='#CACACE' /></div>
                        </div>
                    </div>
                    : ''}
            </div>
            <div>
                {/* 服务说明 pop */}
                {serviceShow ?
                    <div className='sercve- sercve-explain'>
                        <div
                            className='hideBg' //自定义的class名
                        >
                            <div className='bg' onClick={closeServicePop}></div>
                        </div>
                        <div
                        >
                            <div className='cont-'>
                                <div className='sercve-cont-top'>
                                    <div className='top-left'>服务说明</div>
                                    <div className='top-right' onClick={closeServicePop}><img className='close-icon' src={require('../../assets/image/goods/close-icon.png')} alt='' /></div>
                                </div>
                                {
                                    attributeService.map((item, index) => (
                                        <div className='txt-tip' key={index}>
                                            <div className='s-top'>{item.attributeName}</div>
                                            <div className='s-txt'>{item.value}</div>
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </div>

                    : ''}
                {/* 商品参数 pop */}
                {productParamShow ?
                    <div className='sercve- sercve-parameters'>
                        <div
                            className='hideBg' //自定义的class名
                        >
                            <div className='bg' onClick={closeParamPop}></div>
                        </div>

                        <div
                            className='fade' //自定义的class名
                        >
                            <div className='cont-'>
                                <div className='sercve-cont-top'>
                                    <div className='top-left'>商品参数</div>
                                    <div className='top-right' onClick={closeParamPop}><img className='close-icon' src={require('../../assets/image/goods/close-icon.png')} alt='' /></div>
                                </div>
                                <div className='lines-'>
                                    {
                                        attributeParams.map((item, index) => (
                                            <div className='apram-line' key={index}>
                                                <div className='param-tip'>{item.attributeName}</div>
                                                <div className='patam-txt'>{item.value}</div>
                                            </div>
                                        ))
                                    }
                                    {/*<div className='apram-line'>*/}
                                    {/*<div className='param-tip'>生产日期</div>*/}
                                    {/*<div className='patam-txt'>2019年5月21日 至 2019年5月30日</div>*/}
                                    {/*</div>*/}
                                </div>
                            </div>
                        </div>
                    </div>
                    : ''}
                {/*商品详情规格选择  pop  */}

                {productStandardsShow ? <div className='sercve- sercve-product-sku'>
                    <div
                        className='hideBg' //自定义的class名
                    >
                        <div className='bg' onClick={closeStandardsPop}></div>
                    </div>
                    <div
                        className='fade' //自定义的class名
                    >
                        <div className='cont-'>
                            <div className='sercve-cont-top'>
                                <div className='top-left'></div>
                                <div className='top-right' onClick={closeStandardsPop}><img className='close-icon' src={require('../../assets/image/goods/close-icon.png')} alt='' /></div>
                            </div>
                            <div className='pro-cont'>
                                <div className='product-cont'>
                                    <div className='img-cont'><img className='img-i' src={goodData.mainPic} alt='' /></div>
                                    <div className='pro-txt-info-'>
                                        <div className='pro-name'>{goodData && goodData.productName}</div>
                                        <div className='pro-price'><span className='yang'>¥</span><span className='intNum'>{goodData && parseInt((goodData.salePrice / 100).toFixed(2))}.</span><span className='decimals'>{goodData && (goodData.salePrice / 100).toFixed(2).split('.')[1]}</span></div>
                                        {/*<div className='newprice'><div className='yang'>¥</div><div className='pricenumber'>.</div><div className='dots'></div></div>*/}
                                    </div>
                                </div>
                                <div className='decimals-cont'>
                                    <div className='decimals-tip'>(配送地可能会影响库存，请正确选择)</div>
                                    <div className='line-p' onClick={clickHandle}>
                                        <div className='leftp-p'>
                                            <img className='location-icon' src={require('../../assets/image/goods/localtion-icon.png')} alt='' />
                                            <span className='address-'></span>
                                        </div>
                                        <Icon type='right' size='lg' color='#CACACE' /></div>
                                </div>
                                <div className='divide-cont'></div>
                                <div className='sku-cont-check'>
                                    {attributeSpec && attributeSpec.length > 0 ?
                                        attributeSpec.map((item, index) => (
                                            <div key={item.attributeName} className='item-cont'>
                                                <div className='tip-item-cont'>{item.attributeName}</div>
                                                {/* <div className='skus-item-list'>
                                                    {
                                                        item.value.split(',').map((ite: string, i: number) => (
                                                        i == 0 && return (<span key={i} onClick={clickHandle} className='skus-item-i active'>{ite}</span>) 
                                                        i != 0 && return ( <span key={i} onClick={clickHandle} className='skus-item-i'>{ite}</span>)
                                                    ))}
                                                </div> */}
                                            </div>
                                        ))

                                        : ''}
                                    <div className='item-cont item-check-number'>
                                        <div className='tip-item-cont'>商品数量</div>
                                        <div className='change-number'>
                                            <img className='btn-number' onClick={delProduct} src={require('../../assets/image/goods/decrease_icon.png')} alt='' />
                                            <span className='number'>{productNumber}</span>
                                            <img className='btn-number' onClick={addProduct} src={require('../../assets/image/goods/increase_icon.png')} alt='' />
                                        </div>
                                    </div>
                                </div>

                                <div className='foot-add-cart-cont'>
                                    <div className='item sku-add-cart'>加入购物车</div>
                                    <div className='item buy-limit'>立即购买</div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div> : ''
                }

                {/* 适宜人群 pop*/}
                {adaptShow ?
                    <div className='sercve- sercve-explain sercve-Adapt'>
                        <div
                            className='hideBg' //自定义的class名
                        >
                            <div className='bg' onClick={closeAdaptPop}></div>
                        </div>
                        <div
                            className='fade' //自定义的class名
                        >
                            <div className='cont-'>
                                <div className='sercve-cont-top'>
                                    <div className='top-left'>适宜人群</div>
                                    <div className='top-right' onClick={closeAdaptPop}><img className='close-icon' src={require('../../assets/image/goods/close-icon.png')} alt='' /></div>
                                </div>
                                <div className='s-txt'>{goodData.suit && goodData.suit.split(',').join('、')}</div>
                            </div>
                        </div>
                    </div>
                    : ''}


                {/* 禁忌人群 pop*/}
                {tabooShow ?
                    <div className='sercve- sercve-explain sercve-taboo'>
                        <div
                            className='hideBg' //自定义的class名
                        >
                            <div className='bg' onClick={closeTabooPop}></div>
                        </div>
                        <div
                            className='fade' //自定义的class名
                        >
                            <div className='cont-'>
                                <div className='sercve-cont-top'>
                                    <div className='top-left'>禁忌人群</div>
                                    <div className='top-right' onClick={closeTabooPop}><img className='close-icon' src={require('../../assets/image/goods/close-icon.png')} alt='' /></div>
                                </div>
                                <div className='s-txt'>{goodData.noSuit && goodData.noSuit.split(',').join('、')}</div>

                            </div>
                        </div>
                    </div>
                    : ''}
            </div>
            <div className='divide-line'></div>
            {goodData && goodData.subTitle ? <div>
                <div className='product-abstract'>
                    <div className='abstract-tip'>商品简介</div>
                    <div className='abstract-info'>{goodData.subTitle}</div>
                </div>
            </div>
                : ''}
            <div className='divide-line'></div>
            {/* {evaluate ?
                <div>
                    <div className='div-title'>
                        <span className='comment-title' style={{ fontSize: '24px' }}>商品评价({evaluate && evaluate.totalNum || 0})</span>
                        <span className='comment-entry' onClick={clickHandle}>
                            <span>查看全部评价</span> <Icon type='right' size='lg' color='#28C764' />
                        </span>
                    </div>
                    <div className='CommentItem-cont'>
                        <div className='item-c'>
                            <div className='user-c'>
                                {(evaluate && evaluate.user && evaluate.user.userImg) ? <div className='user-avatar'><img src={evaluate.user.userImg} alt='' /> </div> : ''}
                                <div className='user-txt'>
                                    <div className='user-name'>#{evaluate && evaluate.user && evaluate.user.userNickName}</div>
                                    <div className='publish-time'>{evaluate && evaluate.addTime}</div>
                                </div>
                            </div>
                            <div className='user-comment'>{evaluate && evaluate.content}</div>
                            {(evaluatePics && evaluatePics.length > 0) ?
                                <div className='list-img'>
                                    {
                                        evaluatePics.slice(0, 3).map((item) => (
                                            <img key={item} src={item} alt='' />
                                        ))
                                    }
                                    {
                                        evaluatePics.length >= 3 ?
                                            <div className='total-number'>{evaluatePics.length}P</div>
                                            : ''}
                                </div>
                                : ''}
                        </div>
                    </div>

                    <div className='divide-line'></div>
                </div>
                : ''} */}

            <div className='divide-line'></div>
            {
                validAllAuth && validAllAuth.length > 0 ?
                    <div className='goods-aptitude'>
                        <div className='aptitude-top' id='lence-tip'>
                            <img className='line-image' src={require('../../assets/image/goods/line_left.png')} alt='' />
                            <div className='aptitude-top-'>商品资质</div>
                            <img className='line-image' src={require('../../assets/image/goods/line_right.png')} alt='' />
                        </div>
                        {
                            validAllAuth.length > 1 ?
                                <Swiper  {...lenceparams}>
                                    {validAllAuth.map((item, index) => (
                                        <div key={index} id={'screen' + item} className="lenceparams- aptitude-cont">
                                            <img src={item} alt="" className="more-imgs-" />
                                        </div>
                                    ))}
                                </Swiper> : <div className="one-item aptitude-cont">
                                    <span className="after-"></span>
                                    <img src={validAllAuth[0]} alt="" />
                                    <span className="before-"></span>
                                </div>
                        }
                    </div>
                    : ''}
            <div>
                {detailHtml && detailHtml.length > 0 ?
                    <div className='goodCert'>
                        {detailHtml.map((item, index) => (
                            <div key={item.image}>
                                {item.hasOwnProperty('text') ? <div className='goot-txt-info'>{item.text}</div> : ''}
                                {item.hasOwnProperty('image') ?
                                    <div className='pro-detail-img'>
                                        <img className='pro-detail-img-list' src={item.image} alt='' />
                                    </div>
                                    : ''}
                            </div>
                        ))
                        }
                    </div>
                    : ''}
            </div>

            {
                shop ? <div className='shop-cont'>
                    <div className='shop-title'>店铺详情</div>
                    <div className='shop-line'>
                        <div className='left-shop-info'>
                            {shop && shop.shopLogo ? <img className='shop-icon' src={shop.shopLogo} alt='' /> : ''}
                            <div className='shop-txt'>
                                <div className='shop-name'>{shop && shop.shopName}</div>
                                <div className='product-number'>{shop && shop.productCount}件商品</div>
                            </div>
                        </div>
                    </div>

                </div> : ''
            }
            <div>
                <div>
                    <div className='bottomNoteWrap'>
                        <span className="bottomNote">- 已经到底了哦 -</span>
                    </div>
                </div>
            </div>
        </div >
    )
}

export default Preview